---
type: tutorial
title: Stila la tua pagina Su di me
description: |-
  Tutorial: Crea il tuo primo blog Astro —
  Aggiungi un tag di stile Astro per lo styling scoped sulla pagina
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Ora che hai una pagina Su di me con contenuti su di te, è il momento di stilizzarla!

<PreCheck>
  - Stila elementi su una singola pagina
  - Usa variabili CSS
</PreCheck>


## Stila una singola pagina

Usando i tag `<style></style>` di Astro, puoi stilizzare elementi sulla tua pagina. Aggiungere **attributi** e **direttive** a questi tag ti offre ancora più modi per stilizzare.

<Steps>
1. Copia il seguente codice e incollalo in `src/pages/about.astro`:

    ```astro title="src/pages/about.astro" ins={6-11}
    <html lang="it">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head>
    ```

    Controlla tutte e tre le pagine nell'anteprima del tuo browser.

    - Di che colore è il titolo della pagina di:

        - La tua pagina Home?  <Spoiler>nero</Spoiler>
        - La tua pagina Su di me? <Spoiler>viola</Spoiler>
        - La tua pagina Blog? <Spoiler>nero</Spoiler>

    - La pagina con il testo del titolo più grande è? <Spoiler>La tua pagina Su di me</Spoiler>

    :::tip
    Se non riesci a determinare i colori visivamente, puoi usare gli strumenti per sviluppatori nel tuo browser per ispezionare gli elementi del titolo `<h1>` e verificare il colore del testo applicato.
    :::

2. Aggiungi il nome di classe `skill` agli elementi `<li>` generati sulla tua pagina Su di me, in modo da poterli stilizzare. Il tuo codice dovrebbe ora apparire così:

    ```astro title="src/pages/about.astro" 'class="skill"'
    <p>Le mie competenze sono:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>
    ```

3. Aggiungi il seguente codice al tuo tag di stile esistente:

    ```astro title="src/pages/about.astro" ins={6-9}
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>
    ```




  4. Visita di nuovo la tua pagina Su di me nel tuo browser e verifica, tramite ispezione visiva o strumenti per sviluppatori, che ogni elemento nella tua lista di competenze sia ora verde e in grassetto.
</Steps>

## Usa la tua prima variabile CSS
Il tag `<style>` di Astro può anche fare riferimento a qualsiasi variabile dal tuo script frontmatter usando la direttiva `define:vars={ {...} }`. Puoi **definire variabili all'interno del tuo recinto di codice**, poi **usarle come variabili CSS nel tuo tag di stile**.

<Steps>
1. Definisci una variabile `skillColor` aggiungendola allo script frontmatter di `src/pages/about.astro` in questo modo:

    ```astro title="src/pages/about.astro" ins={17}
    ---
    const pageTitle = "Su di me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Scrittrice tecnica",
      hobbies: ["fotografia", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "navy";
    ---
    ```

2. Aggiorna il tuo tag `<style>` esistente qui sotto per definire per prima cosa, poi usare questa variabile `skillColor` all'interno di doppie parentesi graffe.

    ```astro title="src/pages/about.astro" "define:vars={{skillColor}}" "var(--skillColor)" del={7} ins={8}
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>
    ```

3. Controlla la tua pagina Su di me nell'anteprima del tuo browser. Dovresti vedere che le competenze sono ora blu navy, come impostato dalla variabile `skillColor` passata alla direttiva `define:vars`.
</Steps>

<Box icon="puzzle-piece">

## Prova tu stesso - Definisci variabili CSS

<Steps>
 1. Aggiorna il tag `<style>` sulla tua pagina Su di me in modo che corrisponda a quello qui sotto.

    ```astro title="src/pages/about.astro"
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>
    ```

 2. Aggiungi qualsiasi definizione di variabile mancante nel tuo script frontmatter in modo che il tuo nuovo tag `<style>` applichi con successo questi stili alla tua lista di competenze:
    - Il colore del testo è blu navy
    - Il testo è in grassetto
    - Le voci di elenco sono in maiuscolo (tutte lettere maiuscole)
</Steps>
<details>
<summary>✅ Mostrami il codice! ✅</summary>

```astro title="src/pages/about.astro" ins={18-19}
---
const pageTitle = "Su di me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Scrittrice tecnica",
  hobbies: ["fotografia", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Scrivere Documenti"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---
```
</details>

</Box>



<Box icon="check-list">
## Checklist

<Checklist>
- [ ] Posso aggiungere stili CSS a una singola pagina usando un tag `<style>` di Astro.
- [ ] Posso usare variabili per stilizzare elementi sulla pagina.
</Checklist>
</Box>

### Risorse
- [Sintassi Astro vs JSX - confronto](/it/reference/astro-syntax/#differences-between-astro-and-jsx)

- [Tag `<style>` di Astro](/it/guides/styling/#styling-in-astro)

- [Variabili CSS in Astro](/it/guides/styling/#css-variables)



